<script setup>
defineProps({
    image: {
        type: String,
        required: true,
    },
    title: {
        type: String,
        required: true,
    },
    description: {
        type: String,
        required: true,
    },
    action: {
        type: Object,
        color: String,
        route: String,
        label: String,
        default: () => ({
            color: "bg-gradient-danger",
            label: "Learn More",
        }),
    },
});
const emit = defineEmits(["dosth"]);
const dosth = () => {
    //子组件用emit向父组件触发一个事件
    emit("dosth");
};
</script>
<template>
    <div class="card">
        <div class="card-header p-0 position-relative mt-3 mx-3 z-index-2">
            <a :href="action.route" class="d-block blur-shadow-image">
                <img class="card-img" :src="image" :alt="title" style="width: 100%; height: 15rem" @click="dosth" />
            </a>
        </div>
        <div class="card-body text-center">
            <h5 class="font-weight-normal">
                <a href="javascript:;" @click="dosth">{{ title }}</a>
            </h5>
            <!-- <p class="mb-0">
                {{ description }}
            </p> -->
            <button type="button" class="btn btn-sm mb-0 mt-3" :class="action.color" @click="dosth">
                {{ action.label }}
            </button>
        </div>
    </div>
</template>
<style scoped>
.card-img {
    object-fit: contain;
}
</style>
